<template>
  <h1>Uploader 示例</h1>
  <Demo :component="UploaderDemo1" />
  <h2>Uploader Attributes</h2>
  <Table :dataSource="dataSource" :columns="columns" />
</template>

<script lang="ts">
import Demo from "./Demo/index.vue";
import UploaderDemo1 from "./Demo/UploaderDemo1.vue";
import Table from '../lib/table/Table.vue'
export default {
  components: {
    Demo,
    Table
  },
  setup() {
    const dataSource = [
      {
        id: 1,
        params: 'name',
        illustrate: '服务器需要接收一个值为file的name，用于input上',
        type: 'string',
        optional: '-',
        defaults: '-',
      },
      {
        id: 2,
        params: 'action',
        illustrate: '需要一个存放图片的服务器',
        type: 'string',
        optional: '-',
        defaults: '-',
      },
      {
        id: 3,
        params: 'method',
        illustrate: '请求的方法，默认为POST请求',
        type: 'string',
        optional: '-',
        defaults: 'POST',
      },
      {
        id: 4,
        params: 'parseResponse',
        illustrate: '请求图片成功的回调，需要返回处理完成的图片路径',
        type: 'function',
        optional: '-',
        defaults: '-',
      },
      {
        id: 5,
        params: 'fileList',
        illustrate: '图片列表',
        type: 'array',
        optional: '-',
        defaults: '-',
      },
      {
        id: 6,
        params: 'sizeLimit',
        illustrate: '图片的最大尺寸',
        type: 'number',
        optional: '-',
        defaults: '-',
      },
    ]

    const columns = [
      { title: '参数', prop: 'params', width: '300' },
      { title: '说明', prop: 'illustrate', width: '300' },
      { title: '类型', prop: 'type', width: '100' },
      { title: '可选值', prop: 'optional', width: '100' },
      { title: '默认值', prop: 'defaults' },
    ]
    return { UploaderDemo1, dataSource, columns };
  },
};
</script>

<style></style>